<template>
    <div style="display: flex;flex-direction: column;align-items: center">
        <div style="margin: 40px 0"><h1>我的视力健康档案</h1></div>
        <el-card style="width: 80%">
            <div style="width: 100%;display: flex;flex-direction: row;justify-content: space-around;margin-bottom: 20px">
                <el-button type="primary" icon="el-icon-plus" @click="addUser">添加视力健康档案</el-button>
            </div>
            <el-input :disabled="disable" v-model="checkInfoData.name"></el-input>
            <el-table
                    :data="tableData"
                    style="width: 100%;margin-bottom: 20px">
                <el-table-column
                        type="index"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="checkYear"
                        label="年级"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        align="center">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        align="center"
                        label="操作"
                        width="230">
                    <template slot-scope="scope">
                        <el-button
                                @click.native.prevent="showRow(scope.row)"
                                size="small">
                            查看
                        </el-button>
                        <el-button
                                @click.native.prevent="updateRow(scope.$index, tableData)"
                                size="small">
                            编辑
                        </el-button>
                        <el-button
                                @click.native.prevent="deleteRow(scope.$index, tableData)"
                                size="small">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div>
                <el-pagination
                        style="float: left;margin-bottom: 20px"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="searchData.pageNum"
                        :page-sizes="[10, 15, 20, 30]"
                        :page-size="searchData.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="searchData.total">
                </el-pagination>
            </div>
        </el-card>
        <el-dialog :title="title"
                       width="80%"
                       :modal="false"
                       :before-close="handleClose"
                       :visible.sync="dialogVisible">
                <div style="width: 100%;display: flex;align-items: center;flex-direction: column">
                    <el-form :model="checkInfoData" :rules="rules" ref="checkInfoData" label-width="25%" style="width: 90%;" label-position="left">
                        <!-- 学生基本信息 -->
                        <el-alert title="学生基本信息"
                                 type="success"
                                 :closable="false" style="margin-bottom: 10px"></el-alert>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="姓名" prop="name">
                                    <el-input v-model="checkInfoData.name" :disabled="disable" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="性别" prop="sex">
                                    <el-radio :disabled="disable" label="男" v-model="checkInfoData.sex"></el-radio>
                                    <el-radio :disabled="disable" label="女" v-model="checkInfoData.sex"></el-radio>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="实际年龄" prop="realAge">
                                    <el-input type="number" v-model="checkInfoData.realAge" :disabled="disable"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="检查日期" prop="checkTime">
                                    <el-date-picker v-model="checkInfoData.checkTime" :disabled="disable"></el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                <!-- 学年输入 -->
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="学年" prop="checkYear">
                                    <el-input v-model="checkInfoData.checkYear" :disabled="disable"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
            <!-- 眼科信息 -->
            <el-alert title="五官科检查信息--眼科"
                     type="warning"
                     :closable="false" style="margin-bottom: 10px"></el-alert>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="视力-左" prop="leftView">
                        <el-input :disabled="disable"  type="number" v-model="checkInfoData.leftView"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="视力-右" prop="rightView">
                        <el-input :disabled="disable"  type="number" v-model="checkInfoData.rightView"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="矫正视力-左" label-width="30%" prop="correctLeftView">
                        <el-input :disabled="disable"  type="number" v-model="checkInfoData.correctLeftView"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="矫正视力-右" label-width="30%" prop="correctRightView">
                        <el-input :disabled="disable"  type="number" v-model="checkInfoData.correctRightView"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="其他眼疾" label-width="10%" >
                <el-input  :disabled="disable" v-model="checkInfoData.otherEyesSick"></el-input>
            </el-form-item>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="色觉检查-彩色图案及编码" label-width="30%">
                        <el-input :disabled="disable" v-model="checkInfoData.colorOrCode"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="色觉检查-单色识别" label-width="30%">
                        <el-input :disabled="disable" v-model="checkInfoData.singleColorJudge"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="医师签字" label-width="10%" >
                <el-input :disabled="disable" v-model="checkInfoData.signForEyes"></el-input>
            </el-form-item>

            <template>
                        <el-form-item align="right" v-show="!disable">
                            <el-button type="success" @click="disable=false">编辑</el-button>
                            <el-button :disabled="disable" type="primary" @click="saveData(checkInfoData)">保存</el-button>
                            <el-button @click="handleClose">取消</el-button>
                        </el-form-item>
            </template>

            </el-form>
        </div>
    </el-dialog>
    </div>
</template>

<script>
    import Message from '../../components/messages/index.js'
    export default {
        name: "index",

        data(){
            return{
                dialogShowVisible:false,
                dialogVisible:false,
                tableData: [],
                searchData:{
                    pageSize:10,
                    pageNum:1,
                    total:0,
                    clauses:[
                        {
                            column:"userId",
                            operation:"=",
                            value:""
                        }]
                },
                checkInfoData:{},
                disable:true,
                title:"添加用户",
                userOptions:[],
                rules:{
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ],
                    sex: [
                        { required: true, message: '请选择性别', trigger: 'change' }
                    ],
                    realAge: [
                        { required: true, message: '请输入实际年龄', trigger: 'blur' }
                    ],
                    checkTime: [
                        { required: true, message: '请选择检查日期', trigger: 'blur' }
                    ],

                },
                checkDataOptions:[
                    {label:"第一学年"}, {label:"第二学年"}, {label:"第三学年"}, {label:"第四学年"}
                ],
                user:JSON.parse(localStorage.getItem("user"))
            }
        },
        
        methods:{
            handleClose(){
                this.dialogVisible = false;
                this.dialogShowVisible = false;
            },
            initData(){
                this.searchData.clauses[0].value = this.user.id;
                this.$http.post("/checkInfo/page",this.searchData).then(res=>{
                    if (res.status===200){
                        this.tableData = res.data.list;
                        this.searchData.total = res.data.total;
                    }
                })
            },
            handleSizeChange(val){
                this.searchData.pageSize = val;
                this.initData();
            },
            handleCurrentChange(val){
                this.searchData.pageNum = val;
                this.initData();
            },
            addUser() {
                console.log('disable:', this.disable); // 这应该输出 false
                this.title = "添加健康档案";
                this.dialogVisible = true;
                this.disable = false;
                
                // 初始化 checkInfoData 对象，只预填充非用户输入的字段
                this.checkInfoData = {
                    college: this.user.college,
                    major: this.user.major,
                    grade: this.user.grade,
                    stuNo: this.user.stuNo,
                    name: '', // 姓名
                    sex: '', // 性别
                    birth: this.user.birth, // 出生
                    realAge: '', // 实际年龄
                    cultureLevel: this.user.cultureLevel, // 文化程度
                    nation: this.user.nation, // 民族
                    occupation: this.user.occupation, // 职业
                    nativePlace: this.user.nativePlace, // 籍贯
                    presentAddress: this.user.presentAddress, // 现家庭住址
                    workPlace: this.user.workPlace, // 毕业学校或工作单位
                    teacherId: this.user.teacherId, // 教师ID
                    checkTime: '', // 检查日期，需要用户选择
                    // 眼科信息
                    leftView: '', // 视力-左
                    rightView: '', // 视力-右
                    correctLeftView: '', // 矫正视力-左
                    correctRightView: '', // 矫正视力-右
                    otherEyesSick: '', // 其他眼疾
                    colorOrCode: '', // 色觉检查-彩色图案及编码
                    singleColorJudge: '', // 色觉检查-单色识别
                    signForEyes: '', // 医师签字
                };
            },
            showRow(data){
                this.disable = true;
                this.checkInfoData = data;
                this.dialogShowVisible = true;
            },
            updateRow(index,data){
                this.title="编辑健康档案";
                this.disable = false;
                this.$http.get("/checkInfo/get/"+data[index].id).then(res=>{
                    if (res.status===200){
                        this.checkInfoData = res.data;
                        this.dialogVisible = true;
                    }
                })
            },
            deleteRow(index,data){
                Message.confirm("是否删除该档案?").then(()=>{
                    this.$http.get("/checkInfo/delete/"+data[index].id).then(res=>{
                        if (res.status===200){
                            Message.success("操作成功");
                            this.initData();
                        }
                    })
                })
            },
            saveData(){
                delete this.checkInfoData.photo;
                if (this.checkInfoData.id==null || this.checkInfoData.id===""){
                    this.checkInfoData.userId = this.user.id;
                    this.$http.post("/checkInfo/add",this.checkInfoData).then(res=>{
                        if (res.status===200){
                            Message.success("操作成功");
                            this.initData();
                        }
                    })
                } else {
                    this.$http.post("/checkInfo/update",this.checkInfoData).then(res=>{
                        if (res.status===200){
                            Message.success("操作成功");
                            this.initData();
                        }
                    })
                }
                this.dialogVisible = false;
            },
            getAllUser(){
                this.$http.get("/user/getAllStudent/2").then(res=>{
                    if (res.status === 200){
                        this.userOptions = res.data;
                    }
                })
            },
            judgeCheckIsExist(){
                if(this.checkInfoData.checkYear === "" || this.checkInfoData.checkYear == null){
                    this.$message.warning("请选择需要学年")
                }else {
                    this.$http.get("/checkInfo/judgeCheckIsExist",{params:{"userId":this.user.id,"checkYear":this.checkInfoData.checkYear}}).then(res=>{
                        if (res.status === 200){
                            if (res.data===false){
                                this.$message.error("该学生此学年体检单已存在，请重新选择学年!")
                            }
                        }
                    })
                }
            },
            saveSuggestion(data){
                this.$http.post("/suggestion/add",data).then(res=>{
                    if (res.status===200){
                        this.$message.success("留言成功");
                        this.dialogShowVisible = false;
                    }
                })
            }
        },
        mounted(){
            this.initData();
            this.getAllUser();
        }
    }
</script>

<style scoped>
    .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
        margin-right: 0;
    }
</style>